import React, { Component } from 'react'
import './index.less'
import {Row,Col,Input,Button,Radio,message,Select} from 'antd';
import { Link } from 'react-router-dom'
import Picture from './../picture'
import Http from '../../../../axios'
const Option = Select.Option;


const RadioGroup = Radio.Group;
export default class Modify extends Component {
  state = {
    departmentName:null,
    autograph:null,
    sign:null,
    mail:null,
    phone:null,
    departList:[],
    departCode:1,
  }
  componentWillMount(){
    this.queryDepartment()
    this.queryPersonInfor()
  }
  queryPersonInfor=()=>{
    Http.request({
      url: '/user/query',
      method: 'get',
      
    }).then((resData) => {
          this.setState({
            name:resData.data.name,
            sex:resData.data.sex,
            mail:resData.data.mail,
            phone:resData.data.phone,
            sign:resData.data.sign,
            departmentName:resData.data.departmentName,
            autograph:resData.data.autograph,
            iconAddr:resData.data.iconAddr,
          })
          console.log(resData.data.name)
      
      // window.localStorage.setItem('remember', values.remember);
      // window.localStorage.setItem('userInfo', JSON.stringify(resData.data));
      // this.props.history.push('/home/culture');
      console.log(resData)
    })
  }
  handleChange(value) {
    console.log(`${value}`);
    this.setState({
      departCode:value,
    }) 
  }
  queryDepartment(){
    Http.request({
      url: '/department/list',
      method: 'get',
    }).then((resData) => {
      this.setState({
        departList:resData.data,
      })
      console.log(resData)
    })
  }
  checkPhone(){
    let myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
    if(!myreg.test(this.state.phone)||this.state.phone == ""||this.state.phone==null){
      message.info('请填写正确的手机号码！');
      return false;
      
    }else{
      return true;
    }  
  }
  checkMail(){
    let re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
    if(!re.test(this.state.mail)||this.state.mail == ""||this.state.mail== null){
      message.info('请填写正确的邮箱！');
      return false
    }else{
      return true
    }
  }
  checkDepart(){
    if(this.state.departmentName == "" ||this.state.departmentName == null){
      message.info('部门不能为空！');
      return false;
    }else{
      return true
    }
  }
  checkSign(){
    if(this.state.sign == "" ||this.state.sign == null){
      message.info('星座不能为空！');
      return false;
    }else{
      return true;
    }
  }
  checkautograph(){
    if(this.state.autograph == "" ||this.state.autograph == null){
      message.info('个性签名不能为空！');
      return false;
    }else{
      return true;
    }
  }
  save=()=>{
    // if(this.state.departmentName == "" ||this.state.departmentName == null ){
    //   message.info('部门不能为空！');
    // }else if(this.state.autograph == ""|| this.state.autograph == null){
    //   message.info('个性签名不能为空！');
    // }else if(!this.checkMail()){
    //   message.info('请输入正确的邮箱！');
    // }else if(!this.checkPhone()){
    //   message.info('请输入正确的手机号码！');
    // }
    if(this.checkSign()&&this.checkMail()&&this.checkPhone()){
      Http.request({
        url: '/user/update',
        method: 'POST',
        data: {
          autograph: this.state.autograph,
          departCode: this.state.departCode,
          sign:this.state.sign,
          phone:this.state.phone,
          mail:this.state.mail
        }
      }).then((resData) => {
        if(resData.code=="40000"){
          message.info('保存成功！');
          this.props.history.goBack()
        }
          console.log(resData)
      })
    }
     
  }
  onChange = (e) => {
    console.log('radio checked', e.target.value);
    this.setState({
      value: e.target.value,
    });
  }
  goBack=()=>{
    this.props.history.goBack()
  }
  handleIntro(e){
    this.setState({
      departmentName:e.target.value,
    });
  }
  handleSign(e){
    this.setState({
      sign:e.target.value
    });
  }
  handautograph(e){
    this.setState({
      autograph:e.target.value
    });
  }
  handleEmail(e){
    this.setState({
      mail:e.target.value
    });
  }
  handlePhone(e){
    this.setState({
      phone:e.target.value
    });
  }
  render() {
    
    return (
      <div className="base-section">
         <Button type="primary" onClick={this.goBack}>返回</Button>
         <Row>
          <Col span={11}></Col>
          <Col  span={2}>
          {/* <Card className="personal" bodyStyle={{ padding: 0 }}>
            <div className="personal-image">
              <img alt="avatar" src="/assets/home/avatar.jpg" />
            </div>
            <div className="personal-card">
              <h3>头像</h3>
            </div>
          </Card> */}
          <Picture></Picture>
          </Col>
          <Col span={11}></Col>
        </Row>
        <Row>
          <Col span={10}></Col>
          <Col span={8}>
            <Row className="name">
              <Col span={8} >部门</Col>
              <Col span={1}></Col>
              <Col span={15}>
              {/* <Input placeholder="请输入所在部门" onChange={this.handleIntro.bind(this)} defaultValue={this.state.departmentName}></Input> */}
              <Select defaultValue="应用开发部" className="select"  onChange={this.handleChange.bind(this)}>
                    {
                      this.state.departList.map((item,index) => 
                        
                        <Option value={item.id}>{item.name}</Option>
                      )
                    }  
                {/* <Option value="1">应用开发部</Option> */}
                
              </Select>
              
              </Col>
            </Row>
            <Row className="name">
              <Col span={8} >星座</Col>
              <Col span={1}></Col>
              <Col span={15}><Input placeholder="请输入星座" onChange={this.handleSign.bind(this)} defaultValue={this.state.sign}></Input></Col>
            </Row>
            <Row className="name">
              <Col span={8} >邮箱</Col>
              <Col span={1}></Col>
              <Col span={15}><Input placeholder="请输入邮箱" onChange={this.handleEmail.bind(this)} defaultValue={this.state.mail}></Input></Col>
            </Row>
            <Row className="name">
              <Col span={8} >电话</Col>
              <Col span={1}></Col>
              <Col span={15}><Input placeholder="请输入电话" onChange={this.handlePhone.bind(this)} defaultValue={this.state.phone}></Input></Col>
            </Row>
            <Row className="name">
              <Col span={8} >个性签名</Col>
              <Col span={1}></Col>
              <Col span={15}><Input placeholder="编辑个性签名" onChange={this.handautograph.bind(this)} defaultValue={this.state.autograph}/></Col>
            </Row>
            
          </Col>
          <Col span={6}></Col>
        </Row>
        <Row className="modify">
          <Col span={18}></Col>
          <Col span={6}>
            <Link to="/home/modify">
              <Button type="primary" onClick={this.save}>保存</Button>
            </Link>
          </Col>
          
        </Row>
      
      </div>
    )
  }
}
